<template>
  <view>
    <view class="fullscreen-bg">
      <!-- 在这里放置你的其他内容（会覆盖在背景图上） -->
 <TopNavBar title="我的记录" />
      <view class="c-wrap my" v-if="userInfo">
          <!-- 列表展示 -->
          <view
            style="
              margin-top: 50rpx;
              background-color: rgba(33, 36, 55, 0.7);
              border-radius: 12rpx;
              padding: 20rpx 30rpx;
            ">
            <view class="recordTab">
              <view
                :class="activeIndex === '充值' ? 'viewOn' : ''"
                @click="toggleColor('充值',3002)">
                充值
              </view>
              <view
                :class="activeIndex === '提现' ? 'viewOn' : ''"
                @click="toggleColor('提现',17)">
                提现
              </view>
              <view
                :class="activeIndex === '转账' ? 'viewOn' : ''"
                @click="toggleColor('转账',56)">
                转账
              </view>
			  <view
			  :class="activeIndex === '资金用途' ? 'viewOn' : ''"
			  @click="toggleColor('资金用途',3014)">
			  资金用途
			  </view>
		<!-- 	  <view
			  :class="activeIndex === '场地费' ? 'viewOn' : ''"
			  @click="toggleColor('场地费',3013)">
			  场地费
			  </view> -->
            </view>

            <view></view>

            <view
              style="
                padding: 12px 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
              v-for="(item, index) in list"
              :key="index">
              <view style="display: flex; align-items: center">
                <image
                  v-if="activeIndex == '充值'"
                  src="/static/my/cz.png"
                  mode="aspectFill"
                  style="
                    width: 60rpx;
                    height: 60rpx;
                    margin-right: 32rpx;
                  "></image>
                <image
                  v-if="activeIndex == '提现'"
                  src="@/static/my/zc.png"
                  mode="aspectFill"
                  style="
                    width: 60rpx;
                    height: 60rpx;
                    margin-right: 32rpx;
                  "></image>
                <image
                  v-if="activeIndex == '转账'"
                  src="@/static/my/cz.png"
                  mode="aspectFill"
                  style="
                    width: 60rpx;
                    height: 60rpx;
                    margin-right: 32rpx;
                  "></image>
                <view>
                  <view>
                    <text style="font-size: 32rpx; margin-right: 16rpx">
                     
                      {{ item.gameType }}  {{item.memo}}   
				   <!-- {{ item.memo }} -->
                    </text>
                    <text v-if="item.audit"
                      style="font-size: 20rpx; color: rgb(89, 133, 248)"
                      :style="
                        item.audit === '审核中'
                          ? 'color:rgb(89, 133, 248)'
                          : 'color:rgb(89, 248, 133)'
                      ">
                      {{ item.audit }}
                    </text>
                  </view>
                  <view class="time">{{ item.time }}</view>
                </view>
              </view>
              <view class="my_zz">${{ item.money }}22</view>
            </view>
          </view>
        </view>
		<!-- 底层tabber -->
		<view class="footer-area">
				<view v-for="(item, index) in listDate" :key="index" class="tab-item"
					:class="{ 'active': currentIndex === index+1 }" @click="btnTab(item.pagePath, index)">
				 <button v-if="index==2"  id="payButton" class="btnPostion flex items-center justify-center gap-2 px-5 py-3 rounded-lg btn-gradient text-white font-bold text-base transition-transform duration-200">
				        <i class="fa-brands fa-bitcoin"></i>
				        <span>Pay</span>
				    </button>
					<div v-if="index==2" class="bg-dark text-light min-h-screen flex items-center justify-center">
					    <button id="payButton" class="flex items-center justify-center gap-2 px-5 py-3 rounded-lg btn-gradient text-white font-bold text-base transition-transform duration-200">
					        <i class="fa-brands fa-bitcoin"></i>
					        <span>Pay</span>
					    </button>
						</div>
					<image v-else :src="currentIndex === index+1 ? item.selectedIconPath : item.iconPath" class="tab-icon" />
				</view>
			</view>
      </view>

     
    </view>
  </view>
</template>

<script>
	import TopNavBar from '@/components/TopNavBar.vue'
export default {
	 components: {
	    TopNavBar
	  },
  data() {
    return {
      activeIndex: "充值",
      isBacking: false,
      userInfo: null,
        param: {
            page: 1,
            size:20,
            reason:3002
        },
        list: [
       
      ],
       over : false,
        currentIndex: 4,
      listDate: [
        {
          pagePath: "/pages/home/home",
          iconPath: "/static/home/home.png",
          selectedIconPath: "/static/home/homeActive.png",
        },
        {
          pagePath: "/pages/family/family",
          iconPath: "/static/home/family.png",
          selectedIconPath: "/static/home/familyActive.png",
        },
        {pagePath: '/pages/my/myAccount?activeIndex=充值',
          iconPath: "/static/home/add.png",
          selectedIconPath: "/static/home/add.png",
        },
        {
          pagePath: "/pages/ranking/ranking",
          iconPath: "/static/home/ranking.png",
          selectedIconPath: "/static/home/rankingActive.png",
        },
        {
          pagePath: "/pages/my/my",
          iconPath: "/static/home/my.png",
          selectedIconPath: "/static/home/myActive.png",
        },
      ],
    };
  },
    onReachBottom() {
        console.log('onReachBottom')
        this.getList()
    },
    onPullDownRefresh() {
        this.list = [];
        this.over = false;
        this.param.page = 1;
        this.getList()
    },
  async onLoad(e) {
    await uni.$ice.checkLogin();
    this.getUserInfo();
      this.getList()
  },
  onBackPress() {
    // 监听安卓物理返回键
    // this.handleBack();
    // return true; // 阻止默认返回行为
  },
  methods: {
    toggleColor(type,reason) {
      this.activeIndex = this.activeIndex === type ? -1 : type;
        this.over = false;
        this.param.page = 1;
      this.getList(reason)
    },
    btnTab(path, index) {
      this.currentIndex = index;
      uni.navigateTo({
        url: path,
      });
    },
    handleBack() {
      if (this.isBacking) return;
      this.isBacking = true;
      const pages = getCurrentPages();
      if (pages.length > 1) {
        uni.navigateBack({ delta: 1 });
      } else {
        uni.switchTab({ url: "/pages/home/home" });
      }

      // 防止快速多次点击
      setTimeout(() => {
        this.isBacking = false;
      }, 1000);
    },
      getList(reason) {
          if (this.over) {
              return;
          }
         if(reason){
             this.param.reason=reason
         }
		 this.list=[]
	uni.showLoading({
		title: "加载中",
		mask: true
	});
          uni.$ice.post('wallet/gold_log', this.param, false).then(res => {
              if (this.param.page == 1) {
                  this.list = res.data
              } else {
                  this.list = this.list.concat(res.data);
              }
              if (res.data.length < this.param.size) {
                  this.over = true;
              } else {
                  this.param.page++;
              }
			
			  uni.hideLoading()
			  if(this.list.length==0){
				  uni.showToast({
				  	title: '暂无数据',
				  	icon: "none"
				  });
			  }
              uni.stopPullDownRefresh()

          }).catch(err => {

          })
      },
    getUserInfo() {
      let tmp = uni.getStorageSync("userInfo");
      if (tmp) {
        this.userInfo = JSON.parse(tmp);
		return 
      }
      uni.$ice
        .post("user/index", {}, false)
        .then((res) => {
          uni.setStorageSync("userInfo", JSON.stringify(res.data));
          this.userInfo = res.data;
          if (this.userInfo.username != uni.$ice.walletAddress) {
            uni.removeStorageSync("token");
            location.reload();
          }
          uni.stopPullDownRefresh();
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
/* 若在scoped样式中，使用深度选择器 */
::v-deep .u-cell__title-text {
  font-size: 20px !important;
}
.tab-item:nth-child(3) .tab-icon {
  /* 选中第三个 Tab（中间的 add 图标） */
  width: 80px !important;
  /* 放大宽度 */
  height: 80px !important;
  /* 放大高度 */
  position: relative;
  top: -84rpx;
}

.footer-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 62px;
  /* line-height: 86px; */
  padding-top: 26px;
  display: flex;
  background-color: #212437;
  color: red;
  justify-content: space-around;
  padding-left: 16px;
  padding-right: 16px
}

.fullscreen-bg {
  position: fixed;
  /* 关键：固定定位 */
  top: 0;
  left: 0;
  width: 100vw;
  /* 100%视窗宽度 */
  height: 100vh;
  /* 100%视窗高度 */
  background-image: url('@/static/banner.png');
  /* 替换为你的图片路径 */
  background-size: cover;
  /* 图片拉伸填满容器 */
  background-position: center;
  /* 图片居中 */
  background-repeat: no-repeat;
  /* 禁止重复 */
}

.title {
  color: white;
  font-size: 24px;
  position: relative;
  /* 需要设置定位（relative/absolute） */
  z-index: 1;
  /* 确保文字在背景图上方 */
}

.tab-icon {
  width: 30px;
		height: 30px;
}

page {
  background-color: transparent;
}

/* .my .setting .setting-list .left img {
		margin-right: 20rpx
	} */

.my .setting .setting-list .right {
  color: #fff;
}
.my_zz {
  color: rgb(255, 75, 75);
  font-family: 阿里巴巴普惠体 2;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0px;
}
.YE {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 33%;
}
.ye_num {
  color: rgb(255, 255, 255);
  font-family: 阿里巴巴普惠体 2;
  font-size: 36px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: -0.3px;
  text-align: left;
}
.ye_title {
  color: rgba(255, 255, 255, 0.6);
  font-family: 阿里巴巴普惠体 2;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.3px;
  text-align: left;
}
.my_type {
  height: 30px;
  padding: 0 8px;
  border-radius: 3px;
  box-shadow: 0px 0px 50px 0px rgba(27, 88, 249, 0.5);
  background: linear-gradient(
    180deg,
    rgb(27, 88, 249) 19.847%,
    rgb(89, 133, 248) 82.443%
  );
  color: rgb(255, 255, 255);
  font-family: 阿里巴巴普惠体 2;
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.3px;
  text-align: left;
}

.recordTab {
  border-radius: 50px;
  background: rgba(33, 36, 55, 0.7);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 70%;
  margin: 0 auto;
  height: 30px;
}
.recordTab view {
    padding-left: 12px;
    padding-right: 12px;
  border-radius: 50px;
  text-align: center;
  background: rgba(33, 36, 55, 1);
  font-family: 阿里巴巴普惠体 2;
  font-size: 14px;
  font-weight: 400;
  height: 30px;
  line-height: 30px;
}
.recordTab .viewOn {
  border-radius: 50px;
  background: linear-gradient(
    180deg,
    rgb(27, 88, 249) 19.847%,
    rgb(89, 133, 248) 82.443%
  );
}
.time {
  color: rgb(255, 255, 255);
  font-family: 阿里巴巴普惠体 2;
  font-size: 20rpx;
  font-weight: 400;
}
</style>
